<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <title>智能充电桩管理平台</title>
    <meta name="keywords" content="智能充电桩">
    <meta name="description" content="智能充电桩">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/font-awesome.min.css?v=4.4.0}" rel="stylesheet">
    <link th:href="@{/css/animate.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
    <link th:href="@{/css/login.css}" rel="stylesheet">
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <script>
        if (window.top !== window.self) {
            window.top.location = window.location
        };
    </script>

</head>

<body class="signin">
    <div class="signin_header">
        <img th:src="@{/img/logo_title.png}" alt="">
    </div>
    <div class="signinpanel">
        <div class="row">
            <div class="col-sm-7">
                <div class="signin-info">
                    <img th:src="@{/img/logo_img.png}" width="80%" alt="">
                </div>
            </div>
            <div class="col-sm-5">
                <form id="signupForm">
                    <h4 class="no-margins">用户登录</h4>
                    <p class="m-t-md"></p>
                    <div class=" input ">
                        <div class="uname labelIcon"></div>
                        <input type="text" name="username" class="form-control " placeholder="用户名" value="" />
                    </div>
                    <div class=" input  ">
                        <div class="pword labelIcon"></div>
                        <input type="password" name="password" class="form-control" placeholder="密码" value="" />
                    </div>
                    <div class="row " th:if="${captchaEnabled==true}">
                        <div class="col-xs-7" style="padding-right:0; position: relative;">
                            <div class="numcode labelIcon"></div>
                            <input type="text" style="padding-left:34px;" name="validateCode" class="form-control code" placeholder="验证码" maxlength="5" autocomplete="off">
                        </div>
                        <div class="col-xs-5" style="padding-left:0;">
                            <a href="javascript:void(0);" title="点击更换验证码">
                                <img th:src="@{captcha/captchaImage(type=${captchaType})}" class="imgcode" width="100%" />
                            </a>
                        </div>
                    </div>
                    <div class="checkbox-custom" style="margin-top:10px;" th:classappend="${captchaEnabled==false} ? 'm-t'">
                        <input type="checkbox" id="rememberMe" name="rememberMe" style="position: relative; top: 3px"> <label for="rememberMe">记住我</label>
                    </div>
                    <button class="btn btn-success btn-block" id="btnSubmit" data-loading="正在验证登录，请稍后...">登录</button>
                </form>
            </div>
        </div>

    </div>
    <div class="signup-footer">
        <div class="">
            ©2018-2019 中国通信建设第四工程局有限公司
        </div>
    </div>
</body>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:inline="javascript">
    var ctx = [[@{/}]];
    var captchaType = "math";
</script>
<!-- 全局js -->
<script th:src="@{/js/bootstrap.min.js}"></script>
<!-- 验证插件 -->
<script  th:src="@{/js/plugins/validate/jquery.validate.min.js}"></script>
<script  th:src="@{/js/plugins/validate/messages_zh.min.js}"></script>
<script  th:src="@{/js/plugins/layer/layer.min.js}"></script>
<script th:inline="javascript">
    $(function() {
        validateRule();
        $('.imgcode').click(function() {
            var url = ctx + "captcha/captchaImage?type=" + captchaType + "&s=" + Math.random();
            $(".imgcode").attr("src", url);
        });
    });
    $.validator.setDefaults({
        submitHandler: function() {
            login();
        }
    });

    function login() {
        var username = $("input[name='username']").val();
        var password = $("input[name='password']").val();
        var validateCode = $("input[name='validateCode']").val();
        var rememberMe = $("input[name='rememberMe']").is(':checked');
        $.ajax({
            type: "post",
            url: ctx + "login",
            data: {
                "username": username,
                "password": password,
                "validateCode": validateCode,
                "rememberMe": rememberMe
            },
            success: function(r) {
                if (r.code == 0) {
                    location.href = ctx + 'index';
                } else {
                	if(r.msg==null||r.msg==undefined){
                		 location.href = ctx + 'index';
                	}else{
                		$('.imgcode').click();
                        $(".code").val("");
                        layer.msg(r.msg);
                	}
                }
            }
        });
    }

    function validateRule() {
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#signupForm").validate({
            rules: {
                username: {
                    required: true
                },
                password: {
                    required: true
                }
            },
            messages: {
                username: {
                    required: icon + "请输入您的用户名",
                },
                password: {
                    required: icon + "请输入您的密码",
                }
            }
        })
    }
</script>

</html>